<!--
 * @Author: your name
 * @Date: 2021-07-23 15:46:07
 * @LastEditTime: 2021-09-15 14:00:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat/activity/matchInfo/components/totalRanking.vue
-->
<template>
  <view class="rank-wrap">
    <view class="ranking-bg">
      <image :src="'@/static/images/match/ranking_bg.png'|addBaseImgUrl" mode="" />
    </view>
    <view class="ranking-content">
      <view class="ranking-top"></view>
      <view class="ranking-info">
        <view class="ranking-list">
          <view class="list-item head">
            <text class="rank">排名</text>
            <text class="player">球员名</text>
            <text class="group">组/队</text>
          </view>
          <view :class="['list-item','border-bottom-1px',item.actEventTeamEnterList.some(ii => (ii.userId == userData.id)) ? 'check-bg' : '']" v-for="(item, index) in list" :key="item.id">
            <view :class="['rank', 'rank-'+index]">
              <view v-if="item.ranking <= 3"></view>
              <text v-else>{{item.ranking}}</text>
            </view>
            <view class="player">
              <view v-for="play in item.actEventTeamEnterList" :key="play.id" 
                :class="[(play.sex == 2 && index < 3) ? 'girl' : (play.sex == 1 && index < 3) ? 'boy' : '',(play.userId == userData.id && index < 3) ? 'check-player': '']">
                <template v-if="index < 3">
                  <image v-if="play.playerIcon" :src="(play.playerIcon.indexOf('player-icon-boy') > -1 || play.playerIcon.indexOf('player-icon-gril') > -1) ? play.userIcon : play.playerIcon" mode=""></image>
                  <templat v-else>
                    <image :src="play.userIcon" mode=""></image>
                  </templat>
                </template>
                <view v-else class="empty"></view>
                <text :class="[(play.userId == userData.id && index >= 3) ? 'check-text': '']">{{play.relName}}</text>
              </view>
            </view>
            <text class="group">{{item.teamCode}}</text>
          </view>
        </view>
      </view>
      <view class="ranking-bottom"></view>
    </view>
  </view>
</template>

<script>
  export default {
    props: ['list', 'userData'],
    data () {
      return {
      }
    }
  }
</script>

<style lang="scss" scoped>
.rank-wrap {
  width: 100%;
  min-height: 100vh;
  background: #2E87FF;
  padding-bottom: 80rpx;
  .ranking-bg {
    width: 100%;
    height: 455rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .ranking-content {
    width: 710rpx;
    margin: 0 auto;
    position: relative;
    top: -17rpx;
    .ranking-top,.ranking-bottom {
      width: 100%;
      height: 68rpx;
    }
    .ranking-top {
      background: url($public-baseImgUrl+'match/ranking_top.png');
      background-size: 100% 100%;
    }
    .ranking-info {
      margin-top: -2px;
      min-height: 600rpx;
      background: #fff;
      .ranking-list {
        .list-item {
          display: flex;
          width: 100%;
          min-height: 90rpx;
          .rank,.player,.group {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            color: #333;
            >text {
              font-size: 28rpx;
              color: #333;
              line-height: 28rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: 200rpx
            }
          }
          .rank {
            width: 226rpx;
            text {
              text-align: center;
            }
          }
          .group {
            width: 164rpx;
          }
          .player {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            >view {
              width: 100%;
              margin-top: 20rpx;
              display: flex;
              align-items: center;
              justify-content: left;
              position: relative;
              &:last-of-type {
                margin-bottom: 20rpx;
              }
              image {
                margin-right: 20rpx;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                // width: 37rpx;
                // height: 50rpx;
                position: relative;
                z-index: 2;
                background: url($public-baseImgUrl+'icon_renshu.png') center no-repeat;
                background-size: 100% 100%;
              }
              .empty {
                margin-right: 20rpx;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
              }
              text {
                font-size: 28rpx;
                color: #333;
                max-width: 220rpx;
                word-break: keep-all;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              &.check-player {
                // border: 5rpx solid #2E87FF;
                &::after {
                  width: 84rpx;
                  height: 84rpx;
                  background: #fff;
                  position: absolute;
                  top: -6rpx;
                  left: -6rpx;
                  content: '';
                  z-index: 1;
                  border-radius: 50%;
                  border: 5rpx solid #A0C8FF;
                }
              }
            }
            .check-text {
              color: #2E87FF;
            }
            .girl,.boy {
              &::before {
                display: block;
                content: '';
                width: 30rpx;
                height: 30rpx;
                position: absolute;
                top: 0;
                left: 54rpx;
                z-index: 3;
              }
            }
            .girl {
              &::before {
                background: url(~@/static/images/icon_w.png);
                background-size: 100% 100%;
              }
            }
            .boy {
              &::before {
                background: url(~@/static/images/icon_m.png);
                background-size: 100% 100%;
              }
            }
          }
          &.check-bg {
            background: #EEF5FE;
          }
        }
        .head {
          background: #E6F1FF;
          .player {
            align-items: flex-start;
            padding-left: 86rpx;
          }
          .rank,.player,.group {
            font-size: 30rpx;
            color: #999;
            >text {
              font-size: 30rpx;
              color: #999;
            }
          }
        }
        .rank-0,.rank-1,.rank-2 {
          view {
            width: 37rpx;
            height: 50rpx;
          }
        }
        .rank-0 {
          view {
            background: url($public-baseImgUrl+'match/ranking_one.png');
            background-size: 100% 100%;
          }
        }
        .rank-1 {
          view {
            background: url($public-baseImgUrl+'match/ranking_two.png');
            background-size: 100% 100%;
          }
        }
        .rank-2 {
          view {
            background: url($public-baseImgUrl+'match/ranking_three.png');
            background-size: 100% 100%;
          }
        }
      }
    }
    .ranking-bottom {
      margin-top: -2px;
      background: url($public-baseImgUrl+'match/ranking_bottom.png');
      background-size: 100% 100%;
    }
  }
}
</style>